<template>
  <TemplateTitle titleName="每月吨水生产成本、处理成本"></TemplateTitle>
  <div class="chart">
    <div class="standed">
      <span>公司平均处理成本{{ queryTonWaterCostAVGObj.handlingCostAVG }}</span>
    </div>
    <div class="standed" style="top: 22rem">
      <span>公司平均生产成本{{ queryTonWaterCostAVGObj.productCostAVG }}</span>
    </div>
    <chart-completion-status
      :chartData="chartDataList"
      xAxisName="name"
      :option="option"
      :chartType="chartType"
      :twoYAxis="false"
      :unit="unit"
      :orient="'horizontal'"
    ></chart-completion-status>
    <div class="xlabelName">
      <!-- <div class="labelItem" v-for="item in chartDataList" :key="item"
                :style="{ width: 100 / chartDataList.length + '%' }">
                <span>星沙厂</span>
                <span>城西厂</span>
                <span>城北厂</span>
                <span>城南厂</span>
            </div> -->
    </div>
    <div class="legend">
      <p v-for="(item, index) in legendList" :key="index">
        <span :style="{ background: colorList[index] }"></span><a>{{ item }}</a>
      </p>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";

import homeHttp from "@/https/home.js";
import { onMounted, ref } from "vue";
import ChartCompletionStatus from "./charts/ChartCompletionStatus.vue";
const legendList = ref([
  "电耗",
  "污泥",
  "设备",
  "药耗",
  "平均生产成本",
  "平均处理成本",
]);
const colorList = ref([
  "#63b2ee",
  "#76da91",
  "#f8cb7f",
  "#f89588",
  "#7cd6cf",
  "#7898e1",
  "#efa666",
  "#eddd86",
  "#9987ce",
  "#63b2ee",
  "#76da91",
  "#9192ab",
]);
const chartDataList = ref([]);
// const chartDataList = ref([
//     { time: '1月', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3', sj1: '10', sj2: '4', sj3: '6', sj4: '9', sj5: '3', sj6: '3', sj7: '3', sj8: '3' },
//     { time: '2月', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3', sj1: '10', sj2: '4', sj3: '6', sj4: '9', sj5: '3', sj6: '3', sj7: '3', sj8: '3' },
//     { time: '3月', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3', sj1: '10', sj2: '4', sj3: '6', sj4: '9', sj5: '3', sj6: '3', sj7: '3', sj8: '3' },
//     { time: '4月', bz1: '10', bz2: '4', bz3: '6', bz4: '9', bz5: '3', bz6: '3', bz7: '3', bz8: '3', sj1: '10', sj2: '4', sj3: '6', sj4: '9', sj5: '3', sj6: '3', sj7: '3', sj8: '3' },

// ])
const queryTonWaterCostAVGObj = ref({});
const option = ref({});
const chartType = ref([]);
const unit = ref(["元/吨水"]);

onMounted(() => {
  queryProductionCost();
  queryTonWaterCostAVG();
});

const queryTonWaterCost = () => {
  homeHttp.queryTonWaterCost().then((res) => {
    if (res.data.code == 200) {
      console.log(chartDataList);
      res.data.data.forEach((item, index) => {
        chartDataList.value[index].companyProductionCost =
          item.companyProductionCost;
        chartDataList.value[index].companyHandlingCost =
          item.companyHandlingCost;
      });
    }
  });
};
const queryTonWaterCostAVG = () => {
  homeHttp.queryTonWaterCostAVG().then((res) => {
    if (res.data.code == 200) {
      console.log(res.data);
      queryTonWaterCostAVGObj.value = res.data.data;
    }
  });
};
const queryProductionCost = () => {
  homeHttp.queryProductionCost().then((res) => {
    if (res.data.code == 200) {
      let resObj = res.data.data;
      let list = [];
      for (let key in resObj) {
        // console.log(key)
        list.push({
          name: key,
          list: resObj[key],
        });
      }
      list.sort((a, b) => {
        return parseInt(a.name) - parseInt(b.name);
      });
      let chartList = [];
      list.forEach((item) => {
        let chartObj = {};
        chartObj.name = item.name;
        item.list.sort((a, b) => {
          return a.depId - b.depId;
        });
        item.list.forEach((t) => {
          chartObj["powerConsumption" + t.depId] = t.powerConsumption;
          chartObj["sludge" + t.depId] = t.sludge;
          chartObj["equipment" + t.depId] = t.equipment;
          chartObj["drugConsumption" + t.depId] = t.drugConsumption;
        });
        chartList.push(chartObj);
      });
      console.log("---------", resObj, list, chartList);
      chartDataList.value = chartList;

      queryTonWaterCost();
    }
  });
};
</script>

<style scoped lang="less">
.chart {
  position: relative;

  .xlabelName {
    width: 100%;
    box-sizing: border-box;
    padding-left: 10%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .labelItem {
      display: flex;
      flex-direction: row;
      justify-content: center;

      span {
        display: inline-block;
        width: 14rem;
        font-size: 12rem;
        color: #7190b6;
      }
    }
  }
}

.legend {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20rem;
  margin-top: 4rem;

  p {
    color: #7190b6;
    margin-right: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12rem;

    span {
      display: inline-block;
      width: 12rem;
      height: 12rem;
      border-radius: 6rem;
      margin-right: 4rem;
      margin-bottom: 4rem;
    }
  }
}

.chart {
  position: relative;

  .standed {
    position: absolute;
    top: 0;
    right: 0;
    color: #ee114f;
    font-size: 10rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 100;

    p {
      width: 10rem;
      height: 2rem;
      background: #ee114f;
      margin-right: 2rem;
    }
  }
}
</style>
